<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
    <link rel="stylesheet" href="../css/payMassage.css">

</head>

<body>
    <!-- header -->
    <div class="xtx_topnav">
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li id="login">
                    <!-- 有用户名数据 -->
                    <!-- <a href="javascript:;"><i class="iconfont icon-user">用户名</i></a> -->
                    <!-- 没有用户名数据 -->
                    <a href="./login.html">请先登录</a>
                </li>
                <li id="register">
                    <!-- 有用户名数据 -->
                    <!-- <a href="javascript:;">退出登录</a> -->
                    <!-- 没有用户名数据 -->
                    <a href="./register.html">免费注册</a>
                </li>
                <li>
                    <a href="./center-order.html">我的订单</a>
                </li>
                <li>
                    <a href="./center.html">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="mobile sprites"></i>
                        手机版
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li>
                        <a href="../html/header.html">首页</a>
                    </li>
                    <li>
                        <a href="./category01.html">生鲜</a>
                    </li>
                    <li>
                        <a href="./category01.html">美食</a>
                    </li>
                    <li>
                        <a href="./category01.html">餐厨</a>
                    </li>
                    <li>
                        <a href="./category01.html">电器</a>
                    </li>
                    <li>
                        <a href="./category01.html">居家</a>
                    </li>
                    <li>
                        <a href="./category01.html">洗护</a>
                    </li>
                    <li>
                        <a href="./category01.html">孕婴</a>
                    </li>
                    <li>
                        <a href="./category01.html">服装</a>
                    </li>
                </ul>
            </div>
            <!-- 站内搜索 -->
            <div class="xtx_search clearfix">
                <!-- 购物车 -->

                <a href="" class="xtx_search_cart sprites">
                    <!-- <img src="https://img2.baidu.com/it/u=634557016,689610291&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                        alt=""> -->
                    <i>2</i>
                </a>
                <!-- 搜索框 -->
                <div class="xtx_search_wrapper">
                    <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
                </div>
            </div>
        </div>
    </div>
    <!-- 订单提交内容 -->
    <div class="payIng">
        <div class="goodsInfo ">
            <div class="location ">
                <a href="../html/header.html">首页</a> <i>></i> <a href="">购物车</a> <i>> </i> <i>支付订单</i>
            </div>
            <div class="payTime">
                <section>
                    <div><img src="../image/Snipaste_2023-04-26_12-56-18.png" alt=""></div>
                    <div class="payOver">
                        <span>订单提交成功！请尽快完成支付。</span>
                        <span class="countdown">支付时间剩29分59秒,超时后将取消订单</span>
                    </div>
                </section>
                <div class="ch">
                    <span>应付总额:</span>
                    <span>xx元</span>
                </div>
            </div>
            <div class="info-Message">
                <!-- 订单提交后，30分钟内支付 -->
                <!-- 1.左边显示倒计时，右边显示金额 -->
                <div class="goodsaAd">
                    <!-- 顶部金额时间倒计时部分 -->

                </div>
                <!-- 2.选购的商品信息展示 -->
                <div class="payingMessage">
                    <h3>选择以下支付方式付款</h3>
                    <h3>支付平台</h3>
                    <div class="payWay">
                        <a href="https://pay.weixin.qq.com/"></a>
                        <a href="https://auth.alipay.com/login/index.htm"></a>
                    </div>
                    <h3>支付方式</h3>
                    <div class="payBank">
                        <a href="">招商银行</a>
                        <a href="">工商付款</a>
                        <a href="">建设银行</a>
                        <a href="">农业银行</a>
                        <a href="">交通银行</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div class="xtx_footer clearfix" src="icon-kefu">
        <div class="wrapper">
            <!-- 联系我们 -->
            <div class="contact clearfix">
                <dl>
                    <dt>客户服务</dt>
                    <dd class="chat">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="http://erabbit.itheima.net/img/qrcode.5372a064.jpg">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        400-0000-000
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 其它 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 口号 -->
                <div class="slogan">
                    <a href="javascript:;" class="price">价格亲民</a>
                    <a href="javascript:;" class="express">物流快捷</a>
                    <a href="javascript:;" class="quality">品质新鲜</a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/goodsPay.js"></script>
    <script>
        const countdown = document.querySelector('.payTime .payOver .countdown')

        function times() {
            let minute = 29
            let second = 59
            // second.innerHTML = `付款截止：${num1}分${num}秒`
            setInterval(function () {
                second--
                countdown.innerHTML = `支付时间剩${minute}分${second}秒,超时后将取消订单`
                if (second <= 0) {
                    minute--
                    second = 60
                }
            }, 1000)
        }
        times()
    </script>
</body>

</html>